<template>
	<view class="pop-box-container">
		<view class="popup-content">
			<view class="popup-content-title">
				<view v-if="title != ''" class="popup-content-title-tt">{{title}}</view>
				<view v-if="tip != ''" class="popup-content-title-tip">注：{{tip}}</view>
			</view>
			<slot name="body">
				<view class="popup-content-body">
					<textarea class="popup-content-body-textarea" placeholder-style="color:#bbb"
						placeholder="请输入拒绝原因" />
				</view>
			</slot>
			<view class="popup-content-footer">
				<view v-if="showCance" class="popup-content-footer-item popup-content-footer-cance" @tap.stop="cance()">
					{{canceText}}
				</view>
				<view v-if=" showConfirm" class="popup-content-footer-item popup-content-footer-confirm"
					@tap.stop="confirm()">{{confirmText}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "t-pop-input",
		data() {
			return {
				requestIng: false
			};
		},
		props: {
			data: {
				type: Object,
				default: null
			},
			title: {
				type: String,
				default: ''
			},
			tip: {
				type: String,
				default: ''
			},
			
			showCance: {
				type: Boolean,
				default: true
			},
			showConfirm: {
				type: Boolean,
				default: true
			},
			canceText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确认发布'
			},
		},
		methods: {
			confirm() {
				console.log('confirm')
				this.$emit('confirm')
			},
			cance() {
				console.log('cance')
				this.$emit('cance')
			}
		}
	}
</script>

<style lang="scss">
	.pop-flex-s {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pop-flex-c {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* .uni-popup__wrapper {
		border-radius: 10px;
	} */


	.popup-content {
		@extend .pop-flex-c;
		width: 90vw;
		border-radius: 50px;

		// padding: 20rpx 2vw;
		.popup-content-title,
		.popup-content-body {
			padding: 0 30rpx;
		}

		.popup-content-title {
			@extend .pop-flex-c;
			margin: 20rpx 0;

			.popup-content-title-tt {
				display: flex;
				justify-content: center;
				font-size: 40rpx;
				font-weight: 700;
				color: #222;
			}

			.popup-content-title-tip {
				color: #ff9000;
				font-size: 20rpx;
				margin-top: 20rpx;
			}
		}

		.popup-content-body {
			@extend .pop-flex-c;
			margin: 20rpx 0 30rpx;

			&-textarea {
				border: 1px solid #eee;
				border-radius: 10rpx;
			}

			.popup-content-body-item {
				@extend .pop-flex-c;

				.popup-content-body-item-child {
					@extend .pop-flex-s;
					height: 60rpx;
				}
			}
		}

		.popup-content-footer {
			@extend .pop-flex-s;
			border-top: 1px solid #ff9000;
			height: 80rpx;

			.popup-content-footer-item {
				@extend .pop-flex-s;
				justify-content: center;
				flex: 1;
				height: 100%;
			}

			.popup-content-footer-cance {}

			.popup-content-footer-confirm {
				background: #ff9000;
				color: #fff;
				border-radius: 0 0 10px 0;
			}
		}
	}

	.font-24 {
		font-size: 24rpx;
		color: #666;
	}

	.font-28 {
		font-size: 28rpx;
		color: #222;
		font-weight: 600;
	}
</style>
